<template>
	<view class="contina bBtn_p_b140">
		<view>
			<view class="tit1 w">基础信息</view>
			<view class="card">
				<u--form labelPosition="left" :model="form" labelWidth="125" ref="form1" borderBottom
					:labelStyle="labelStyle">
					<u-form-item label="开票类型" prop="form.type" borderBottom @click="show2=true;">
						<u--input v-model="form.type" placeholder-style="text-align: right;color:#999999"
							placeholder="请选择开票类型" border="none" inputAlign="right">
						</u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="公司名称" prop="form.corp_name" borderBottom>
						<!-- <view style="text-align: right;">海南省水利水电建设工程有限公司</view> -->
						<u--input v-model="form.corp_name" placeholder-style="text-align: right;color:#999999"
							placeholder="请填写公司名称" border="none" inputAlign="right">
						</u--input>
					</u-form-item>
					<u-form-item label="纳税人识别号" prop="form.taxpayer_no" borderBottom ref="item1">
						<!-- <view style="text-align: right;">914600002012449762</view> -->
						<u--input v-model="form.taxpayer_no" placeholder-style="text-align: right;color:#999999"
							placeholder="请填写纳税人识别号" border="none" inputAlign="right">
						</u--input>
					</u-form-item>
					<u-form-item label="开票金额" prop="form.name" borderBottom ref="item1">
						<view style="text-align: right;">¥{{form.amount}}</view>
					</u-form-item>
					<u-form-item label="公司地址" prop="form.address" borderBottom ref="item1">
						<u--input v-model="form.address" border="none"
							placeholder-style="text-align: right;color:#999999" inputAlign="right"
							placeholder="请输入公司地址"></u--input>
					</u-form-item>
					<u-form-item label="联系电话" prop="form.phone" borderBottom ref="item1">
						<u--input v-model="form.phone" border="none" placeholder-style="text-align: right;color:#999999"
							inputAlign="right" placeholder="请输入联系电话"></u--input>
					</u-form-item>
					<u-form-item label="开户行" prop="form.open_bank" borderBottom ref="item1">
						<u--input v-model="form.open_bank" border="none"
							placeholder-style="text-align: right;color:#999999" inputAlign="right"
							placeholder="请输入开户行名称"></u--input>
					</u-form-item>
					<u-form-item label="银行账号" prop="form.bank_account" ref="item1">
						<u--input v-model="form.bank_account" border="none"
							placeholder-style="text-align: right;color:#999999" inputAlign="right"
							placeholder="请输入银行账号"></u--input>
					</u-form-item>
				</u--form>
			</view>
			<view class="tit1 w">接收方式</view>
			<view class="card">
				<u--form labelPosition="left" :model="form" labelWidth="125" ref="form1" borderBottom
					:labelStyle="labelStyle">
					<u-form-item label="电子邮箱" prop="form.email" ref="item1">
						<u--input v-model="form.email" border="none" placeholder-style="text-align: right;color:#999999"
							inputAlign="right" placeholder="请输入电子邮箱"></u--input>
					</u-form-item>
				</u--form>
			</view>
		</view>
		<flooterCom text="提交" @click="toAdd"></flooterCom>
		<u-popup :show="show" @close="show=false" :closeable="true" mode="bottom" :closeOnClickOverlay="true"
			:round="10">
			<view class="content_pop">
				<view class="title">确认发票</view>
				<view class="tip">请确认开票信息无误，电子发票开具后将发送至您邮箱</view>
				<view class="content">
					<view class="flex_a_c">
						<view class="label">发票类型</view>
						<view class="value">电子发票</view>
					</view>
					<view class="flex_a_c">
						<view class="label">开票类型</view>
						<view class="value">{{form.type}}</view>
					</view>
					<view class="flex_a_c">
						<view class="label">公司名称</view>
						<view class="value">{{form.corp_name}}</view>
					</view>
					<view class="flex_a_c">
						<view class="label">纳税人识别号</view>
						<view class="value">{{form.taxpayer_no}}</view>
					</view>
					<view class="flex_a_c">
						<view class="label">开票金额</view>
						<view class="value">¥{{form.amount}}</view>
					</view>
					<view class="flex_a_c" style="align-items: flex-start;">
						<view class="label">公司地址</view>
						<view class="value">{{form.address}}</view>
					</view>
					<view class="flex_a_c">
						<view class="label">联系电话</view>
						<view class="value">{{form.phone}}</view>
					</view>
					<view class="flex_a_c">
						<view class="label">开户行</view>
						<view class="value">{{form.open_bank}}</view>
					</view>
					<view class="flex_a_c">
						<view class="label">银行账号</view>
						<view class="value">{{form.bank_account}}</view>
					</view>
					<view class="flex_a_c">
						<view class="label">接收邮箱</view>
						<view class="value">{{form.email}}</view>
					</view>
				</view>
				<view class="payBtn" @click="submit">
					确认提交
				</view>
			</view>
		</u-popup>
		<u-action-sheet :show="show2" :actions="actions" @close="show2 = false" @select="selectAction"></u-action-sheet>
	</view>
</template>

<script>
	import searchCom from "@/compoment/searchCom.vue";
	import flooterCom from "@/compoment/flooterCom.vue"
	export default {
		data() {
			return {
				labelStyle: {
					display: 'flex',
					justifyContent: 'spaceBetween'
				},
				show: false,
				show2: false,
				actions: [{
						name: '增值税普通发票'
					},
					{
						name: '增值税专用发票'
					},
				],
				form: {
					type: '',
					corp_name: '',
					taxpayer_no: '',
					amount: '',
					address: '',
					phone: '',
					open_bank: '',
					bank_account: '',
					email: '',
					order_id: '',
				},
			}
		},
		components: {
			searchCom,
			flooterCom
		},
		onLoad(option) {
			this.form.amount = option.amount
			this.form.order_id = option.ids.split(',')
		},
		methods: {
			toAdd() {
				this.show = true;
			},
			async submit() {

				uni.showLoading({
					title: '保存中...',
					mask: true
				})
				try {
					if (this.edit == 1) {
						await this.$api.corpPayInvoiceApi.update(this.form)
					} else {
						await this.$api.corpPayInvoiceApi.add(this.form)
					}
					this.$fun.tipTopage('保存成功', "/pagesB/inSubmitSuccess/inSubmitSuccess")
				} catch (e) {
					//TODO handle the exception
				}
				uni.hideLoading()
			},
			selectAction(v) {
				this.form.type = v.name
			}
		}
	}
</script>

<style lang="scss" scoped>
	.contina {
		height: 100%;

		.tit1 {
			font-size: 28rpx;
			font-weight: 400;
			color: #888888;
			margin: 30rpx 0;
		}

		.card {
			padding: 0;
			box-sizing: border-box;
			position: relative;
			margin-top: 0;

			::v-deep .u-form-item__body {
				padding-left: 30rpx;
				padding-right: 30rpx;
			}
		}

		.content_pop {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 40rpx;

			.title {
				font-size: 32rpx;
				font-weight: 400;
				color: #000000;
			}

			.tip {
				height: 56rpx;
				background: #F8EBDA;
				border-radius: 5px 5px 5px 5px;
				font-size: 24rpx;
				font-weight: 400;
				color: #DF9E5C;
				text-align: center;
				line-height: 56rpx;
				padding: 8rpx 0;
				width: 688rpx;
				margin-top: 30rpx;
			}

			::v-deep .u-icon__icon {
				color: #ffffff !important;
			}

			.content {
				background: #F5F8FF;
				border-radius: 5px 5px 5px 5px;
				padding: 30rpx;
				width: 688rpx;
				box-sizing: border-box;
				margin-top: 20rpx;

				.flex_a_c {
					justify-content: space-between;
					margin-bottom: 20rpx;

					.label {
						width: 170rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #555555;
					}

					.value {
						font-size: 28rpx;
						font-weight: 400;
						color: #000000;
					}
				}
			}

			.payBtn {
				width: 690rpx;
				height: 96rpx;
				background: #0074FF;
				border-radius: 50px 50px 50px 50px;
				text-align: center;
				line-height: 96rpx;
				color: #fff;
				margin-top: 40rpx;
			}
		}
	}
</style>